<template>
	<view @click="handleClick" class="i-tag"
		:style="{color, background: bgColor, border,padding,fontSize: size, borderRadius: radius, marginRight: right,marginBottom: bottom}">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	const props = defineProps({
		color: {
			type: String,
			default: '#A0A0AD'
		},
		bgColor: {
			type: String,
			default: '#F3F4F5'
		},
		border: {
			type: String,
			default: 'none'
		},
		size: {
			type: String,
			default: '24rpx'
		},
		padding: {
			type: String,
			default: '8rpx 16rpx'
		},
		radius: {
			type: String,
			default: '8rpx'
		},
		right: {
			type: String,
			default: '0'
		},
		bottom: {
			type: String,
			default: '0'
		},
	})
	const emit = defineEmits(['click'])
	const handleClick = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
	.i-tag {
		display: inline-block;
		@include dfont;
		white-space: nowrap;
		// @include flexRC;
	}
</style>
